<template>
  <div ref="BarECharts" style="width: 100%;height: 100%"></div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import * as echarts from 'echarts';

const BarECharts = ref(null)
onMounted(() => {
  if (BarECharts.value) {
    const Echarts = echarts.init(BarECharts.value);
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        top: '10px',
        left: '10px',
        data: ['预计产值', '实际产值', '平均值预测']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '8%',
        containLabel: true
      },
      yAxis: {
        type: 'value',

        splitLine: {
          show: true,
          lineStyle: {
            color: '#D2E6F9',
            type: 'dashed'
          }
        },
        axisLine: {
          lineStyle: {
            color: '#D2E6F9'
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#000'
        }
      },
      xAxis: {
        type: 'category',
        data: ['2024-01', '2024-02', '2024-03', '2024-04', '2024-05', '2024-06'],
        axisLine: {
          lineStyle: {
            color: '#D2E6F9'
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#000'
        }
      },
      series: [
        {
          name: '预计产值',
          type: 'bar',
          barWidth: 18,
          barGap: '40%',
          data: [89, 59, 60, 29, 56, 34],
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 1,
              x2: 0,
              y2: 0,
              colorStops: [{
                offset: 0, color: '#8BDCFF' // 0% 处的颜色
              }, {
                offset: 1, color: '#4594E8' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          },
          label: {
            normal: {
              show: true,
              formatter: '{c}',
              position: 'top',
              textStyle: {
                color: '#999',
              }

            }
          }
        },
        {
          name: '实际产值',
          type: 'bar',
          barWidth: 18,
          barGap: '40%',
          data: [113, 76, 71, 94, 62, 58],
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 1,
              x2: 0,
              y2: 0,
              colorStops: [{
                offset: 0, color: '#FFB2B2' // 0% 处的颜色
              }, {
                offset: 1, color: '#F45353' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          },
          label: {
            normal: {
              show: true,
              formatter: '{c}',
              position: 'top',
              textStyle: {
                color: '#999',
              }

            }
          }
        },
        {
          name: '平均值预测',
          type: 'bar',
          barWidth: 18,
          barGap: '40%',
          data: [96, 65, 62, 64, 60, 49],
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 1,
              x2: 0,
              y2: 0,
              colorStops: [{
                offset: 0, color: '#59FFB7' // 0% 处的颜色
              }, {
                offset: 1, color: '#37BDFF' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          },
          label: {
            normal: {
              show: true,
              formatter: '{c}',
              position: 'top',
              textStyle: {
                color: '#999',
              }

            }
          }
        }
      ]
    }
    Echarts.setOption(option);
    window.onresize = Echarts.resize
  }
})


</script>

<style lang="less" scoped>
</style>
